<template>

  <el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
    <template #header>
      <el-row>
        <el-col :span='10'>
          <div style='line-height: 32px'>流程模板</div>
        </el-col>
        <el-col :span='14' style='text-align: right'>
          <el-button type='success' @click='save(state)' plain>保 存</el-button>
          <el-button type='info' plain>复 制</el-button>
          <el-button type='info' @click='pageClose' plain>关 闭</el-button>
        </el-col>
      </el-row>
    </template>
    <CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose'/>
    <div style='margin-top: 8px;margin-bottom: 8px'>
      <el-form ref='formRef' :model='form' label-width='140px'>
        <el-tabs type='card' v-model='activeName'>
          <el-tab-pane label='基本信息' name='tab1' class='yform el-form--inline'>
            <div class="yform-div">
              <el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
                <el-input v-model='form.name'></el-input>
              </el-form-item>
              <el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
                <el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
              </el-form-item>
              <el-form-item label='排序号：'>
                <el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
              </el-form-item>
              <el-form-item label='是否可用：'>
                <el-switch v-model='form.avtag'>
                </el-switch>
              </el-form-item>
            </div>
          </el-tab-pane>

          <el-tab-pane label='表单配置' name='tab2'>
            <el-row style='border-top: 1px solid #d2d2d2;'>
              <el-col :span='24'>
                <v-form-designer v-if='state.vformShow' ref='vFormRef'/>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label='流程配置' name='tab3'>
            <div style='width: 100%;height: 720px'>
              <!--							<Modeler2 @bpmnMounted='bpmnMounted' />-->
              <Modeler @bpmnMounted='bpmnMounted'/>
              <Panel/>
              <BpmnActions/>
            </div>
          </el-tab-pane>

          <el-tab-pane label='权限配置' name='tab4' class='yform el-form--inline'>
            <div class="yform-div">
              <el-form-item label='备注：' style="width: 100%;">
                <el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
                          type='textarea' :rows='4'
                          v-model='form.notes'>
                </el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label='其他信息' name='tab9' class='yform el-form--inline'>
            <div class="yform-div">
              <el-form-item label='备注：' style="width: 100%">
                <el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
                          type='textarea' :rows='4' v-model='form.notes'>
                </el-input>
              </el-form-item>
              <el-form-item label='创建人：' style="width: 25%">
                {{ form.crman ? form.crman.name : '' }}
              </el-form-item>
              <el-form-item label='创建时间：' style="width: 25%">
                <div class='zinput'> {{ form.crtim }}</div>
              </el-form-item>
              <el-form-item label='更新人：' style="width: 25%">
                {{ form.upman ? form.upman.name : '' }}
              </el-form-item>
              <el-form-item label='更新时间：' style="width: 25%">
                <div class='zinput'> {{ form.uptim }}</div>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </el-card>
</template>
<script lang='ts'>
export default {name: 'OaFlowTempEdit'};
</script>
<script lang='ts' setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import {pageSave, pageClose} from '/@/comps/page/edit';
import {useRoute} from 'vue-router';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import {BpmnStore} from '/@/bpmn/store';
import {NextLoading} from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import {FormInstance} from 'element-plus';
import request from '/@/utils/request';

const route = useRoute();
const formRef = ref<FormInstance>();
const activeName = ref('tab1');

const state = reactive({
  url: '/oa/flow/temp',
  params: {path: '', query: {} as any},
  form: {avtag: true} as any,
  vformShow: true
});

const {form} = toRefs(state);

const vFormRef = ref(null) as any;

onMounted(async () => {
  NextLoading.done();
  state.params = <any>route;
  let id = state.params.query?.id;
  if (id) {
    state.form = await request({
      url: state.url + '/one/' + id,
      method: 'get',
    });
    vFormRef.value.setFormJson(JSON.parse(state.form.vform));
    // state.vformShow=true;
    // console.log(vFormRef.value);
    // console.log(state.form.vform);
  } else {
    let catid = state.params.query?.catid;
    if (catid) {
      state.form.cate = {id: catid, name: state.params.query?.catna};
    }
    state.form.avtag = true;
    vFormRef.value.setFormJson({
      "widgetList": [],
      "formConfig": {
        "modelName": "formData",
        "refName": "vForm",
        "rulesName": "rules",
        "labelWidth": 80,
        "labelPosition": "left",
        "size": "",
        "labelAlign": "label-left-align",
        "cssCode": "",
        "customClass": "",
        "functions": "",
        "layoutType": "PC",
        "jsonVersion": 3,
        "onFormCreated": "",
        "onFormMounted": "",
        "onFormDataChange": "",
        "onFormValidate": ""
      }
    });
  }

  if (form.value.id) {
    await BpmnStore.importXML(form.value.prxml);
  } else {
    await BpmnStore.importXML(defxml);
  }

});


async function save(state: any) {

  const bpmn = await BpmnStore.getXML();
  // console.log(typeof (bpmn.xml));
  // xFlow.value.getData();
  form.value.vform = JSON.stringify(vFormRef.value.getFormJson());
  form.value.prxml = bpmn.xml;
  console.log(bpmn.xml);
  await pageSave({formRef: formRef.value, state});
}


const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
    '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
    '  <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
    '    <bpmn2:startEvent id="N1" name="开始节点">\n' +
    '      <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
    '    </bpmn2:startEvent>\n' +
    '    <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
    '    <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
    '      <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
    '      <bpmn2:incoming>L4</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
    '      <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
    '    </bpmn2:exclusiveGateway>\n' +
    '    <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
    '    <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:executionListener expression="money&#60;=100" event="take" />\n' +
    '      </bpmn2:extensionElements>\n' +
    '    </bpmn2:sequenceFlow>\n' +
    '    <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:executionListener expression="money&#62;100" event="take" />\n' +
    '      </bpmn2:extensionElements>\n' +
    '    </bpmn2:sequenceFlow>\n' +
    '    <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
    '    <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
    '    <bpmn2:endEvent id="N3" name="结束节点">\n' +
    '      <bpmn2:incoming>L2</bpmn2:incoming>\n' +
    '    </bpmn2:endEvent>\n' +
    '    <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
    '    <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
    '    <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
    '      <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:formProperty id="userid" type="string" />\n' +
    '        <activiti:formProperty id="money" type="int" />\n' +
    '        <activiti:properties>\n' +
    '          <activiti:property name="编辑" value="edit" />\n' +
    '          <activiti:property name="撤回" value="back" />\n' +
    '          <activiti:property name="提交" value="commit" />\n' +
    '        </activiti:properties>\n' +
    '      </bpmn2:extensionElements>\n' +
    '      <bpmn2:incoming>L1</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
    '    </bpmn2:userTask>\n' +
    '    <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
    '      <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:properties>\n' +
    '          <activiti:property name="审批" value="approve" />\n' +
    '          <activiti:property name="驳回" value="reject" />\n' +
    '        </activiti:properties>\n' +
    '      </bpmn2:extensionElements>\n' +
    '      <bpmn2:incoming>L3</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
    '    </bpmn2:userTask>\n' +
    '    <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:properties>\n' +
    '          <activiti:property name="审批" value="approve" />\n' +
    '          <activiti:property name="驳回" value="reject" />\n' +
    '        </activiti:properties>\n' +
    '      </bpmn2:extensionElements>\n' +
    '      <bpmn2:incoming>L5</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
    '    </bpmn2:userTask>\n' +
    '    <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:properties>\n' +
    '          <activiti:property name="审批" value="approve" />\n' +
    '          <activiti:property name="驳回" value="reject" />\n' +
    '        </activiti:properties>\n' +
    '      </bpmn2:extensionElements>\n' +
    '      <bpmn2:incoming>L6</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
    '    </bpmn2:userTask>\n' +
    '    <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
    '      <bpmn2:extensionElements>\n' +
    '        <activiti:formProperty id="userid" type="string" />\n' +
    '        <activiti:taskListener class="do some thing" event="complete" />\n' +
    '        <activiti:properties>\n' +
    '          <activiti:property name="审批" value="approve" />\n' +
    '        </activiti:properties>\n' +
    '      </bpmn2:extensionElements>\n' +
    '      <bpmn2:incoming>L7</bpmn2:incoming>\n' +
    '      <bpmn2:incoming>L8</bpmn2:incoming>\n' +
    '      <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
    '    </bpmn2:userTask>\n' +
    '  </bpmn2:process>\n' +
    '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
    '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
    '      <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
    '        <di:waypoint x="560" y="200" />\n' +
    '        <di:waypoint x="560" y="250" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
    '        <di:waypoint x="560" y="670" />\n' +
    '        <di:waypoint x="560" y="732" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
    '        <di:waypoint x="690" y="550" />\n' +
    '        <di:waypoint x="690" y="630" />\n' +
    '        <di:waypoint x="610" y="630" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
    '        <di:waypoint x="430" y="550" />\n' +
    '        <di:waypoint x="430" y="630" />\n' +
    '        <di:waypoint x="510" y="630" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
    '        <di:waypoint x="535" y="400" />\n' +
    '        <di:waypoint x="430" y="400" />\n' +
    '        <di:waypoint x="430" y="470" />\n' +
    '        <bpmndi:BPMNLabel>\n' +
    '          <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
    '        </bpmndi:BPMNLabel>\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
    '        <di:waypoint x="585" y="400" />\n' +
    '        <di:waypoint x="690" y="400" />\n' +
    '        <di:waypoint x="690" y="470" />\n' +
    '        <bpmndi:BPMNLabel>\n' +
    '          <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
    '        </bpmndi:BPMNLabel>\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
    '        <di:waypoint x="560" y="330" />\n' +
    '        <di:waypoint x="560" y="375" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
    '        <di:waypoint x="560" y="68" />\n' +
    '        <di:waypoint x="560" y="120" />\n' +
    '      </bpmndi:BPMNEdge>\n' +
    '      <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
    '        <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
    '        <bpmndi:BPMNLabel>\n' +
    '          <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
    '        </bpmndi:BPMNLabel>\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
    '        <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
    '        <bpmndi:BPMNLabel>\n' +
    '          <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
    '        </bpmndi:BPMNLabel>\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
    '        <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
    '        <bpmndi:BPMNLabel>\n' +
    '          <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
    '        </bpmndi:BPMNLabel>\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
    '        <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
    '        <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
    '        <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
    '        <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
    '      </bpmndi:BPMNShape>\n' +
    '      <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
    '        <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
    '      </bpmndi:BPMNShape>\n' +
    '    </bpmndi:BPMNPlane>\n' +
    '  </bpmndi:BPMNDiagram>\n' +
    '</bpmn2:definitions>\n';


//region -----分类弹框逻辑-----
const cateModal = ref();
const openCateModal = () => {
  cateModal.value.openModal();
};
const cateChoose = (node: any) => {
  if (node == null) {
    form.value.cate = null;
  } else {
    form.value.cate = {id: node.id, name: node.name};
  }
};
//endregion

</script>

<style scoped>

</style>
